<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片上传并反显</title>
</head>

<body>
<h1>图片上传并反显</h1>
<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="img" id="imgInput">
  <input type="submit" value="上传图片">
</form>
<div id="imageDisplay">
  <!-- 上传成功后图片将显示在这里 -->
</div>

<script>
  document.getElementById('uploadForm').addEventListener('submit', function (e) {
    e.preventDefault(); // 阻止表单默认提交行为

    const formData = new FormData();
    const fileInput = document.getElementById('imgInput');
    const file = fileInput.files[0];

    if (file) {
      formData.append('img', file);

      // 发送 POST 请求到后端接口
      fetch('/upload', {
        method: 'POST',
        body: formData
      })
              .then(response => response.json())
              .then(data => {
                if (data.flag) {
                  // 上传成功，显示图片
                  const imageUrl = data.data;
                  const imgElement = document.createElement('img');
                  imgElement.src = imageUrl;
                  imgElement.alt = 'Uploaded Image';
                  const imageDisplay = document.getElementById('imageDisplay');
                  imageDisplay.innerHTML = ''; // 清空之前的内容
                  imageDisplay.appendChild(imgElement);
                } else {
                  // 上传失败，提示用户
                  alert('上传失败：' + data.message);
                }
              })
              .catch(error => {
                console.error('请求出错：', error);
                alert('请求出错，请稍后重试');
              });
    } else {
      alert('请选择要上传的图片');
    }
  });
</script>
</body>

</html>